import React, { useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { connect } from 'react-redux';
import { NavBar, List } from 'antd-mobile';
import { SearchOutline } from 'antd-mobile-icons';

import { getCinemaList } from '../redux/action/CinemaActionCreator';

const useCinemaList = (props) => {
  const { cityId, list, getCinemaList } = props;

  useEffect(() => {
    list.length === 0 && getCinemaList(cityId);
    return () => {};
  }, [cityId, list.length, getCinemaList]);

  return {
    list,
  };
};

const CinemaHeader = (props) => {
  const { cityName } = props;
  const navigate = useNavigate();

  const handleCityClick = useCallback(() => {
    navigate('/city');
  }, [navigate]);

  const handleSearchClick = useCallback(() => {
    navigate('/search');
  }, [navigate]);

  return (
    <div className="myNavbar">
      <NavBar
        style={{ '--height': '50px' }}
        backArrow={false}
        left={<div onClick={handleCityClick}>{cityName}</div>}
        right={
          <SearchOutline
            style={{ fontSize: 24 }}
            onClick={handleSearchClick}></SearchOutline>
        }>
        影院
      </NavBar>
    </div>
  );
};

const CinemaContent = (props) => {
  const { list } = useCinemaList(props);

  const navigate = useNavigate();
  return (
    <div style={{ marginTop: '50px' }}>
      <List mode="card">
        {list.map((item) => (
          <List.Item
            key={item.cinemaId}
            description={
              <div>
                <div>{item.address}</div>
              </div>
            }
            clickable={false}
            onClick={() => navigate(`/cinema/${item.cinemaId}`)}>
            {item.name}
          </List.Item>
        ))}
      </List>
    </div>
  );
};

const Cinema = (props) => {
  return (
    <div>
      <CinemaHeader cityName={props.cityName} />
      <CinemaContent {...props} />
    </div>
  );
};

const MapStateToPropsParam = (state) => {
  let { id: cityId, name: cityName } = state.CityReducer.city;
  let { cinemaList: list } = state.CinemaReducer;
  return {
    cityId,
    cityName,
    list,
  };
};

const MapDispatchToPropsParam = {
  getCinemaList,
};

export default connect(MapStateToPropsParam, MapDispatchToPropsParam)(Cinema);
